<template>
  <div class="main">
    <div class="wrapper">
      <div class="leftNav">
        <div
          class="firstNav"
          v-for="(firstNav, index) in categoryTree"
          :key="index"
        >
          <h2 class="touch">{{ firstNav.name }}</h2>
          <div
            class="secondNav touch"
            :id="secondNav.id"
            v-for="(secondNav, index) in firstNav.children"
            :key="index"
            @click.stop="goCategory(secondNav.id, firstNav.id)"
          >
              <span :class="[{'selectNavClass': (secondNav.id == selectId)}]">{{ secondNav.name }}</span>
            <div
              class="threeNav touch"
              :id="threeNav.id"
              v-for="(threeNav, index) in secondNav.children"
              :key="index"
              @click.stop="goCategory(threeNav.id, firstNav.id)"
              
            >
              <span :class="[{'selectNavClass': (threeNav.id == selectId)}]">{{ threeNav.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="content">
      <div class="container">
        <h2 class="title">
          <span>{{ categoryTree && categoryTree[0].name }}</span>
          <b class="line"></b>
        </h2>

        <div
          class="oneContent"
          v-if="categoryContent && categoryContent.length === 1"
        >
          <div class="oneContentHtml" v-html="categoryContent[0].content"></div>
        </div>

        <div class="moreContent" v-else>
          <ul>
            <li v-for="(item, index) in categoryContent" :key="index">
              <span @click="goContext(item.id)" class="touch listhover">{{ item.title }}</span>
              <span>{{ item.publishTime | fmtDate }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from "@/utils/request.js";

export default {
  data() {
    return {
      // ---------------- 路由跳转传参 -----------------------
      // 选中栏目的 id
      selectId: "",

      // 选中栏目父栏目 id
      selectParentId: "",

      // // 选中栏目父栏目 index
      // selectIndex: this.$route.query.index,
      // ---------------- 路由跳转传参 -----------------------

      // ---------------- 侧边导航栏 -----------------------

      categoryTree: null,
      // ---------------- 侧边导航栏 -----------------------

      // ---------------- 文章区域 -----------------------

      categoryContent: null,
      // ---------------- 文章区域 -----------------------
    };
  },

  methods: {
    init() {
      this.selectId = this.$route.query.id;
      this.selectParentId = this.$route.query.parentId;
      this.queryCategoryTree();
      this.queryCategoryContent(this.selectId);
    },

    // 查询栏目树木 /index/category/findCategoryTree
    async queryCategoryTree() {
      let res = await get("/index/category/findCategoryTree");
      this.categoryTree = res.data.filter((item) => {
        return this.selectParentId == item.id;
      });
    },

    // 查询文章咨询集 /index/article/pageQuery
    async queryCategoryContent(id) {
      let res = await get("/index/article/pageQuery", {
        page: 1,
        pageSize: 10,
        categoryId: id,
      });
      this.categoryContent = res.data.list;
    },

    // 前往栏目页
    goCategory(id, parentId) {
      this.$router.push({
        path: "/category",
        query: {
          id,
          parentId,
        },
      });
    },

    // 前往文章页面
    goContext(id) {

      this.$router.push({
        path: "/page",
        query: {
          id,
        },
      });
    }
  },

  watch: {
    $route(to, from) {
      this.init();
    },
  },

  created() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/main.scss";

.main {
  overflow: hidden;
}

.selectNavClass {
  background: #fff url(../assets/ico16.png) no-repeat 50px center !important;
  color: $--theme-primary;
}

.leftNav {
  width: 300px;
  padding: 0 5px;
  margin-top: 30px;
  float: left;

  .firstNav {
    font-size: 18px;
    text-align: center;
    color: #ffcf46;
    background: $--theme-primary;
    height: 50px;
    line-height: 50px;

    .secondNav {
      color: #666666;
      span {
        background: #fff url(../assets/ico15.png) no-repeat 50px center;
        display: block;
      }
      .threeNav {
        padding-left: 20px;
        span {
          background: #fff url(../assets/ico15.png) no-repeat 50px center;
        }
      }
    }
  }
}

.content {
  width: 870px;
  padding: 0 5px 0 15px;
  margin-top: 30px;
  float: left;
  .container {
    text-align: center;

    .title {
      width: 100%;
      height: 36px;
      margin-bottom: 36px;
      display: block;
      line-height: 36px;
      background: url(../assets/ico2.png) no-repeat left;
      font-size: 16px;
      padding: 0 10px;
      color: $--theme-primary;
      text-align: left;

      .line {
        border-bottom: 1px solid #666666;
        display: block;
      }
    }
    .oneContentHtml {
      width: 100%;
      margin-bottom: 36px;
      display: block;
      line-height: 36px;
    }
    .moreContent {
      text-align: left;
      ul {
        li {
          display: block;
          width: 100%;
          color: #666;
          font-size: 14px;
          height: 28px;
          line-height: 28px;
          text-indent: 20px;
          background: url(../assets/ico17.png) no-repeat left;
          overflow: hidden;
          span:nth-of-type(1) {
            float: left;
          }
          span:nth-of-type(2) {
            float: right;
          }
        }
      }
    }
  }
}
.touch{
  cursor:pointer;
}
.listhover:hover{

  color: $--theme-primary;
}
</style>